<template>
<!-- 全局的头部组件 -->
 <div>
   <!-- 头部组件 -->
    <div class="header">
      <div class="header_left">
        <img src="https://assets-cdn.lanqb.com/lanqb/logo05.png" alt="" />
      </div>
      <div class="header_right">
        <img src="https://assets-cdn.lanqb.com/lanqb/m/header-search.png" alt="" />
        <div class="header_right_trans">
          <img src="https://assets-cdn.lanqb.com/pc/login/regster-reward_3.png" alt="" />
          <div class="header_right_trans_p">
            <span>注册</span>
            <span>登录</span>
          </div>
        </div>
      </div>
    </div>
    <img class="header_ad" src="https://assets-cdn.lanqb.com/popupv3/2022/jun-ban_m.png" alt="" />
   </div>
</template>

<script>
export default {
  name: 'NavView',
};
</script>

<style lang="scss" scoped>

 /* #region 头部组件样式 */
   @keyframes move {
      0% {
        transform: translateY(-40px);
      }

      50% {
        transform: translateY(0);
      }

      100% {
        transform: translateY(-40px);
      }
    }
    .header {
      padding: 0 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 44px;
      overflow: hidden;
    }

    .header_left img {
      width: 177px;
      height: 27px;
    }

    .header_right {
      width: 136px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .header_right>img {
      width: 42px;
      height: 28px;
    }

    .header_right_trans {
      height: 27px;
    }

    .header_right_trans>img {
      width: 82px;
      height: 27px;
    }

    .header_right_trans_p {
      display: flex;
      justify-content: space-around;
      margin-top: 10px;
    }

    .header_right_trans {
      animation: move infinite 3s linear;
    }

    .header_ad {
      width: 100%;
      height: 40px;
    }

    /* #enregion */
</style>